<link rel="stylesheet" href="/stylesheets/admin.css">
<div class="row" style="height: 100px">
    <div class="col-xs-3">
        <ul class="list-group">
            <li class="list-group-item list-group-title"><strong style="font-size: 16px">管理中心</strong></li>
            <% if (user && user.root) { %>
            <li class="list-group-item active"><a class="menu-item" href="/admin/user">用户管理</a></li>
            <li class="list-group-item"><a class="menu-item" href="/admin/role">角色管理</a></li>
            <% } %>
            <li class="list-group-item"><a class="menu-item" href="/admin/robot">机器人管理</a></li>
            <li class="list-group-item"><a class="menu-item" href="/admin/delegater">代理机管理</a></li>
            <li class="list-group-item"><a class="menu-item" href="/admin/gituser">Git用户管理</a></li>
            <% if (user && user.role && user.role.permissions.managerI) { %>
            <li class="list-group-item"><a class="menu-item" href="/admin/repo">Repo管理</a></li>
            <% } %>
        </ul>
    </div>
    <div class="col-xs-9">
        <div class="setting-div">
            <div class="setting-header-div">
                <button id="create-btn" class="create-btn btn btn-default">添加用户</button>
                <hr>
            </div>
            <div>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>用户名</th>
                        <th>昵称</th>
                        <th>邮箱</th>
                        <th>角色</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="list-body">
                    </tbody>
                </table>
            </div>
            <div class="setting-footer-div">

            </div>
        </div>
        <div style="height: 40px"></div>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加用户</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="nickname" class="col-sm-2 control-label">昵称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="nickname" placeholder="请输入昵称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <!--<input type="text" class="form-control">-->
                                <input type="text" class="form-control" id="email" placeholder="请输入邮箱">
                                <span class="input-group-addon">@<%= website.email()%></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="passwd" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="passwd" placeholder="请输入密码|修改是留空为不修改密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="role" class="col-sm-2 control-label">角色</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="role">
                                <% if (roles && roles.length) { %>
                                    <% roles.forEach(function(role){ %>
                                    <option value=<%= role._id%>><%= role.name%></option>
                                    <% }) %>
                                <% } else { %>
                                    <option value="">无可选角色</option>
                                <% } %>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="submit-btn" class="btn btn-primary">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<link rel="stylesheet" href="/stylesheets/jquery-confirm.min-3.2.3.css">
<script src="/javascripts/jquery-confirm.min-3.1.1.js"></script>
<script language="JavaScript">
    var editId = null;

    $("#create-btn").click(function () {
        $('#myModalLabel').text('添加用户');
        var username = $('#username').val('');
        var nickname = $('#nickname').val('');
        $('#username').attr("disabled", false);
        $('#email').attr("disabled", false);
        var passwd = $('#passwd').val('');
        var email = $('#email').val('');
        var role = $('#role').val('');
        $('#myModal').modal('show');
        editId = null;
    })

    function delClick(node) {
        $.confirm({
            title: '确定要删除该用户？',
            content: '删除后将无法恢复',
            animationBounce: 1.5,
            animation: 'rotateXR',
            closeAnimation: 'rotateYR',
            buttons: {
                ok: {
                    text: "确定",
                    btnClass: 'btn-success',
                    keys: ['enter'],
                    action: function(){
                        var tdNode = node.parentNode.parentNode;
                        var id = tdNode.id;
                        delAction(id)
                    }
                },
                cancel: {
                    text: "取消",
                    action:function(){
                    }
                }
            }
        });
    }

    function delAction(id) {
        $.post('/admin/user/del',{id:id},function (data) {
            if (data.code === 0) {
                showSuccess('已删除');
                loadUserList();
            } else {
                showError(data.message);
            }
        });
    }

    function editClick(node) {
        $('#myModalLabel').text('编辑用户');
        var tdNode = node.parentNode.parentNode;
        var id = tdNode.id;

        var username = $('#username').val(document.getElementById('username_' + id).innerText);
        $('#username').attr("disabled", true);
        var nickname = $('#nickname').val(document.getElementById('nickname_' + id).innerText);
        var passwd = $('#passwd').val('');
        var emailValue = document.getElementById('email_' + id).innerText;
        emailValue = emailValue.substring(0,emailValue.length - 10);
        var email = $('#email').val(emailValue);
        $('#email').attr("disabled", true);

        var roleInfo = document.getElementById('role_' + id).innerText;

        $("#role option").each(function(i,n){
            if($(n).text()===roleInfo)
            {
                $(n).attr("selected",true);
            } else  {
                $(n).attr("selected",false);
            }
        })

        $('#myModal').modal('show');
        editId = id;
    }

    $("#submit-btn").click(function () {
        var nickname = $('#nickname').val();
        var passwd = $('#passwd').val();
        var email = $('#email').val();
        var username = $('#username').val();
        var role = $('#role option:selected').val();

        if (editId === null && username.trim().length === 0) {
            showError('用户名不能为空');
            return;
        }
        if (nickname.trim().length === 0) {
            showError('昵称不能为空');
            return;
        }
        if (editId === null && passwd.trim().length === 0) {
            showError('密码不能为空');
            return;
        }
        if (editId === null && email.trim().length === 0) {
            showError('邮箱不能为空');
            return;
        }
        if (role.trim().length === 0) {
            showError('请选择角色');
            return;
        }
        var param = ({
            nickname : nickname,
            role : role
        });

        if (editId) {
            param.username = username;
            param.email = email;
            if (passwd.trim().length > 0) {
                param.passwd = passwd;
            }
            param.id = editId;
            $.post('/admin/user/edit',param,function (data) {
                if (data.code === 0) {
                    $('#myModal').modal('hide');
                    showSuccess('已更新 ' + username );
                    loadUserList();
                } else  {
                    showError(data.message);
                }
            })
        } else  {
            param.passwd = passwd;
            param.username = username;
            param.email = email;
            $.post('/admin/user/add',param,function (data) {
                if (data.code === 0) {
                    $('#myModal').modal('hide');
                    showSuccess('已添加 ' + username );
                    loadUserList();
                } else  {
                    showError(data.message);
                }
            })
        }


    })

    $(function () {
        loadUserList();
    })

    function loadUserList() {
        $.post("/admin/user/list",function (data) {
            if (data.code === 0) {
                var parent = document.getElementById('list-body');
                for (var i = parent.children.length - 1; i >= 0; i--) {
                    parent.removeChild(parent.children[i]);
                }
                for (var i = 0 ; i < data.data.length ; i++) {
                    var user = data.data[i];
                    var userNode = document.createElement('tr');
                    var id = user._id;

                    userNode.id = id;

                    var usernameNode = document.createElement('td');
                    usernameNode.innerText = user.username;
                    usernameNode.id = 'username_' + id;

                    var nicknameNode = document.createElement('td');
                    nicknameNode.innerText = user.nickname;
                    nicknameNode.id = 'nickname_' + id;

                    var emailNode = document.createElement('td');
                    emailNode.innerText = user.email + '@<%= website.email()%>';
                    emailNode.id = 'email_' + id;

                    var roleNode = document.createElement('td');
                    roleNode.innerText = user.role ? user.role.name : '未知角色';
                    roleNode.id = 'role_' + id;

                    var  editNode = document.createElement('td');
                    editNode.innerHTML = "<a onclick='editClick(this)'>编辑</a>&nbsp;&nbsp;<a onclick='delClick(this)'>删除</a>";

                    userNode.appendChild(usernameNode);
                    userNode.appendChild(nicknameNode);
                    userNode.appendChild(emailNode);
                    userNode.appendChild(roleNode);
                    userNode.appendChild(editNode);

                    parent.appendChild(userNode);
                }

            } else  {

            }
        })
    }
</script>